<template>
    <div>
        <ul>
            <li class="upload">
                <el-upload
                    :action="action"
                    list-type="picture-card"
                    :headers="{ Authorization: 'Bearer ' + token }"
                    :on-preview="onPreview"
                    :before-upload="beforeUpload"
                    :on-success="onSuccess"
                    :show-file-list="false"
                    :disabled="isDisabled"
                >
                    <i class="el-icon-plus"></i>
                </el-upload>
            </li>
            <li v-for="(item,index) in fileList">
                <div style="width: 90px;height: 90px;overflow:hidden;position: relative;"
                     class="image-container">
                    <img width="90" height="90" :src="uploadUrl +  item" alt=""/>
                    <div class="image_inner"
                         style="position: absolute;top: 0;left: 0;width: 90px;height: 90px;text-align: center;line-height: 90px;">
                        <div class="mask"></div>
                        <span style="margin-right: 10px;z-index: 2;position:relative" @click="onClick(item,index)">
                        <i class=" el-icon-delete" style="color: #fff;cursor: pointer;" v-if="isDelete === false"></i>
                    </span>
                        <span style="margin-left: 10px;z-index: 2;position:relative" @click="download(item)"
                              v-if="isDownLoad !== false">
                        <i style="color: #fff;cursor: pointer;" class="el-icon-download"></i>
                    </span>
                        <span style="margin-left: 10px;z-index: 2;position:relative" @click="showDialog(item)"
                              v-if="isLook === false">
                        <i style="color: #fff;cursor: pointer;" class="el-icon-zoom-in"></i>
                    </span>
                    </div>
                </div>
            </li>
        </ul>
        <div v-if="tips !== ''" class="el-upload__tip" style="width: 615px;color: rgba(153, 153, 153, 1);">
            {{ tips }}
        </div>
    </div>

</template>
<script>
import {mapState} from "vuex";

export default {
    data() {
        return {}
    },
    computed: {
        ...mapState(["token", "action", "uploadUrl", "downLoadUrl"]),
    },
    props: {
        tips: {
            type: String,
            default: ''
        },
        accept: {
            type: String,
            default: '*'
        },
        suffix: {
            type: Array,
        },
        fileList: {
            type: Array,
            default: [],
        },
        isDownLoad: {
            type: Boolean,
            default: false
        },
        isDelete: {
            type: Boolean,
            default: false
        },
        isLook: {
            type: Boolean,
            default: false
        },
        isDisabled: {
            type: Boolean,
            default: false
        },
        maxSizeRange: {
            type: Array,
            default: () => [],
        }
    },
    mounted() {
    },
    methods: {
        beforeUpload(file) {
            if (this.suffix.length > 0) {
                if (this.suffix.indexOf(file.name.split(".").reverse()[0].toLowerCase()) === -1) {
                    this.$message.error('仅支持' + this.suffix.join(',') + '文件格式');
                    return false;
                }
            }
            if (this.maxSizeRange.length > 0) {
                if (this.maxSizeRange[0] > file.size / 1024 / 1024 && this.maxSizeRange[1] > file.size / 1024 / 1024) {
                    this.$message.error('图片大小应为1-4M');
                    return false;
                }
            }
            this.$emit("beforeUpload", file)
        },
        onSuccess(response, file, fileList) {
            this.$emit("success", response, file, fileList)
        },
        onPreview(file) {
            this.$emit("onPreview", file)
        },
        download(item) {
            window.open(this.downLoadUrl + 'path=' + item)
        },
        showDialog(item) {
            this.$emit("showDialog", item)
        },
        onClick(item, index) {
            this.fileList.splice(index, 1)
            this.$emit("onClick", item, index)
        }
    },
    watch: {
        fileList(data) {
        }
    }
}
</script>


<style scoped lang="less">
ul {
    display: block;
    overflow: hidden;
    width: 100%;

    li {
        float: left;
        margin: 5px 10px;
        overflow: hidden;
        border-radius: 5px;
    }


}

.image_inner:hover .mask {
    opacity: 1;
    cursor: pointer;
}

.mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s;
}
</style>
